<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.js"></script>
    <style>
        .sj {
            /* border: 1px solid red; */
            width: 393px;
            height: 830px;
            background-image: url(./img02.png);
            /* 插入背景图片 */
            background-size: 100% 100%;
            /* 背景图片铺满整个页面 */
            margin-top: 80px;
        }
        
        .body {
            display: flex;
            justify-content: center;
            /* 设置位置居中 */
        }
        
        #box1 {
            /* border: 1px solid black; */
            width: 393px;
            height: 393px;
            margin-top: 25%;
            /* 设置到顶部的距离 */
            display: flex;
            flex-wrap: wrap;
            /* 设置盒子自动换行 */
        }
        
        #box1>div {
            border: 1px solid rgb(119, 150, 215);
            width: 120px;
            height: 120px;
            margin-left: 2%;
            margin-top: 1%;
        }
        
        .shuzi {
            font-size: 50px;
            text-align: center;
            align-content: center;
            justify-content: center;
            /* 42——44文字居中 */
        }
        
        #top {
            border: 1px;
            height: 80px;
            width: 393px;
            display: flex;
            margin-top: 50%;
            font-size: 50px;
            text-align: center;
            align-content: center;
            justify-content: center;
        }
        
        #top>div {
            
            height: 60px;
            width: 60px;
            border: 1px solid rgb(71, 161, 224);
            margin: auto;
            /* 元素居中 */
        }
        
        .success{
            position: absolute;
            top: 45%;
            left: 42.5%;
            background-color: antiquewhite;
            height: 140px;
            width: 15%;
        }
        .success>div{
            font-size: 30px;
            text-align: center;
        }
        .success>.d1{
            margin-top: 10px;
            color: red;
        }
        #next{
            margin-top: 15px;
            cursor: pointer;
        }
        .start{
            position: absolute;
            margin-top: 40%;
            height: 80px; 
            width: 350px;
            border: 1px solid rgb(0, 179, 255);
            border-radius: 10px;
            font-style: oblique;
            background-color: rgb(71, 161, 224);
            font-size: 25px;
            color: white;
            transform-origin: 20% 50%;
        }
        .level{
            font-size: 20px;
            margin-left: 10px;
            margin-top: 5px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="sj">
            <div class="level"></div>
            <div id="top">
                <!-- 设置顶部数字查看框 -->
                <div class="t1"></div>
                <div class="t2"></div>
                <div class="t3"></div>
                <div class="t4"></div>
                <!-- 四个盒子类 -->
            </div>
            <div id="box1">
                <!-- 设置玩法框 -->
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <div class="shuzi"></div>
                <!-- 九个盒子框 -->
            </div>
        </div>

        <button class="start">点击按钮后3秒钟后点击与上方数字相同数字的位置</button>
        <!-- 设置“开始”按钮 点击事件“start”触发效果 设置“start”类 -->
    </div>

    <div class="success">
        <div class="d1">恭喜过关</div>
        <div id="next">下一关</div>
    </div>
</body>

<script>
    $(".success").hide();
    var box1 = $("#box1");
    $.data(box1, 'level', 1);
    var arr = init();
    cover();
    select();

    //初始化头部
    function init() {
        var level = $.data(box1, 'level');
        $(".level").html("关数：" + level)
        $.data(box1, 'nums', 0);
        //长度为4的数组，数字不同
        var arr_yuanshi = arr_yuanshi1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var arr = [];
        var arr1 = [];

        for (var i = 0; i < 4; i++) {
            //随机获取一个数字，赋值给
            var random1 = Math.floor(Math.random() * arr_yuanshi.length)
            arr.push(arr_yuanshi[random1]);

            // 删除原始数组中的下标为random1的元素
            arr_yuanshi = $.grep(arr_yuanshi, function(value, index) {
                if (index !== random1) {
                    return value;
                }
            })
        }
        // console.log(arr)


        for (var i = 0; i < 9; i++) {

            //随机获取一个数字，赋值给
            var random1 = Math.floor(Math.random() * arr_yuanshi1.length)
            arr1.push(arr_yuanshi1[random1]);

            // 删除原始数组中的下标为random1的元素
            arr_yuanshi1 = $.grep(arr_yuanshi1, function(value, index) {
                if (index !== random1) {
                    return value;
                }
            })
        }
        // console.log(arr1)
        for (var j = 1; j <= 4; j++) {

            var html = '<div>' + arr[j - 1] + '</div>'
            $('#top>.t' + j).append(html);
        }

        //
        for (var i = 0; i < 9; i++) {
            var html = '<div class="littleBox">' + arr1[i] + '</div>'
                // 定义变量将“getsz”追加在每个小盒子中
            $('#box1').children().eq(i).append(html);
            // 将变量值“getsz”追加在每个小盒子中
        };

        return arr;
    }

    $('.start').click(function() {
            $('.littleBox').hide().addClass('yc');
        })
        // 利用类选择器设置点击事件，完成点击效果，利用子代选择器选中，添加类方法“yc”(在样式中设置隐藏效果)


    //定时器Í
    function cover() {
        setTimeout(function() {
            $(".start").trigger("click")
        }, 3000)
    }

    //
    function select() {
        $(".shuzi").click(function() {
            console.log($(this).children().html())
            console.log(arr)

            var digital = $(this).children().text();
            console.log(digital)

            //判断数字是否在arr中
            if ($.inArray(parseInt(digital), arr) == -1) {
                alert('输入错误')
            } else {
                $(this).children().show();
                var nums = $.data(box1, 'nums');
                $.data(box1, 'nums', nums + 1);
            }

            //判断box1中nums的值
            if ($.data(box1, 'nums') >= 4) {
                $(".shuzi").unbind('click');
                // alert('恭喜过关！！！')
                $(".success").show();
                var level = $.data(box1, 'level');
                $.data(box1, 'level', level + 1);
            }
        })
    }

    $("#next").click(function() {
        $(".success").hide();

        $("#top div").empty();
        $(".shuzi").empty();
        arr = init();
        cover();
        select();
    })
</script>

</html>